<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宝宝日志编辑器</title>
    <style>
        .textarea {
            border: 1px black solid;
            width: 260px;
            min-height: 300px;
            background-color: rgb(254, 239, 221);
            margin: 10px 0 10px 0;
            font-size: 16px;
        }

        .btn-cls {
            height: 45px;
            width: 120px;
            margin-right: 20px;
            border: 1px solid #808080;
            border-radius: 5px;
            background-color: #ffc9c9;
        }

        .btn-cls:active {
            transform: scale(0.95);
            background-color: #efa6a6;
        }

        .btn-copy {
            height: 45px;
            width: 120px;
            margin-top: 5px;
            border: 1px solid #808080;
            border-radius: 5px;
            background-color: #a5e885;
        }


        .btn-copy:active {
            transform: scale(0.95);
            background-color: #95d17a;
        }

        .btn-rcd {
            height: 45px;
            width: 260px;
            margin-top: 10px;
            border: 1px solid #808080;
            border-radius: 5px;
            background-color: #a5e885;
        }

        .toolarea {
            margin: 10px 0 0 0;
            font-size: 20px;
        }



        button {
            font-size: 20px;
        }

        .ipt {
            font-size: 20px;
        }

        .ipt1 {
            width: 140px;
            font-size: 18px;
        }

        .tt {
            font-size: 28px;
        }
    </style>
</head>

<body onload="innt()">
    <div id="logarea">
        <label for="logtextarea" class="tt">宝宝日志：</label><br>
        <textarea class="textarea" name="txtarea" id="logtextarea"></textarea>
    </div>
    <div>
        <button class="btn-cls" onclick="cls()">清除记录</button>
        <button class="btn-copy" onclick="copy()">复制记录</button>
    </div>
    <div class="toolarea">
        <label for="logtable">活动：</label>
        <table id="logtable" border="0" cellspacing="0" cellpadding="0" width="260px">
            <tr>
                <td>
                    <input class="ipt" type="radio" name="action" id="drinkmilk" value="🍼喝奶"
                        onchange="iptAction(this)">
                    <label for="drinkmilk">🍼喝奶</label>
                </td>
                <td>
                    <input class="ipt" type="radio" name="action" id="eatfood" value="🍚辅食" onchange="iptAction(this)">
                    <label for="eatfood">🍚辅食</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input class="ipt" type="radio" name="action" id="eatsnacks" value="🍌零食"
                        onchange="iptAction(this)">
                    <label for="eatsnacks">🍌零食</label>
                </td>
                <td>
                    <input class="ipt" type="radio" name="action" id="drinkwater" value="🛀洗澡"
                        onchange="iptAction(this)">
                    <label for="drinkwater">🛀洗澡</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input class="ipt" type="radio" name="action" id="sleep" value="😴睡觉" onchange="iptAction(this)">
                    <label for="sleep">😴睡觉</label>
                </td>
                <td>
                    <input class="ipt" type="radio" name="action" id="takeshit" value="💩排便" onchange="iptAction(this)">
                    <label for="takeshit">💩排便</label>
                </td>
            </tr>

            <tr>
                <td>
                    <input class="ipt" type="radio" name="action" id="hangout" value="🏃户外" onchange="iptAction(this)">
                    <label for="hangout">🏃‍♂️户外</label>
                </td>
                <td>
                    <input class="ipt" type="radio" name="action" id="other" value="📝" onchange="iptAction(this)">
                    <label for="other">📝其他</label>
                </td>
            </tr>
        </table>


        <div class="toolarea">
            <label for="starttime">开始时间：</label>
            <input class="ipt1" type="time" id="starttime">
        </div>
        <div class="toolarea">
            <label for="finishtime">结束时间：</label>
            <input class="ipt1" type="time" id="finishtime">
        </div>

        <div class="toolarea">
            <label for="logipt">详细内容：</label>
            <input class="ipt1" type="text" id="logipt" placeholder="请输入记录内容">

            <div>
                <button class="btn-rcd" onclick="record()">记录</button>
            </div>
        </div>
    </div>

    <script>
        function innt() {

            let lsData = localStorage.getItem('content');

            if (lsData != null) {
                document.getElementById("logtextarea").value = lsData;
            } else {
                console.log("本地存储为空");
                //获取当前日期并格式化为"YYYY.MM.DD"的格式
                var now = new Date();
                var year = now.getFullYear();
                var month = now.getMonth() + 1;
                var day = now.getDate();
                var date = year + "." + month + "." + day;
                //计算系统时间是星期几
                var week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
                var weekday = week[now.getDay()];
                document.getElementById("logtextarea").value = "天天日记" + "-" + date + "（" + weekday + "）" + "\n";
                //更新本地储存
                localStorage.setItem('content', document.getElementById("logtextarea").value);
            }

            console.log("页面加载完成。");
        }

        function cls() {
            if (confirm("确定要清除记录内容吗？")) {
                document.getElementById("logtextarea").value = "";
                localStorage.removeItem('content');
                location.reload();
            }else {
                console.log("取消清除记录内容。");
            }


        }

        function copy() {
            document.getElementById("logtextarea").select();
            document.execCommand("copy");
        }

        function iptAction(val) {
            document.getElementById("logipt").value = "";
            document.getElementById("logipt").value = val.value;
        }

        function record() {
            var starttime = document.getElementById("starttime").value
            var finishtime = document.getElementById("finishtime").value
            if (starttime != "") {
                if (finishtime != "") {
                    //将用户输入的字符串改为数组，用于后面方便操作emoji表情。
                    let newNote = Array.from(document.getElementById("logipt").value);
                    //将emoji表情与文字分离
                    let emj = newNote.slice(0, 1);
                    let note = newNote.slice(1).join("");
                    //重整格式将文本发送至多行文本框
                    document.getElementById("logtextarea").value += emj + starttime + "-" + finishtime + note + "\n";

                    localStorage.setItem('content', document.getElementById("logtextarea").value);

                    //清空用户输入的各个内容
                    document.getElementById("logipt").value = "";
                    document.getElementById("starttime").value = "";
                    document.getElementById("finishtime").value = "";


                    // 将单选框name的checked属性设置为false
                    var radios = document.getElementsByName('action');
                    for (var i = 0; i < radios.length; i++) {
                        radios[i].checked = false;
                    }
                } else {
                    //将用户输入的字符串改为数组，用于后面方便操作emoji表情。
                    let newNote = Array.from(document.getElementById("logipt").value);
                    //将emoji表情与文字分离
                    let emj = newNote.slice(0, 1);
                    let note = newNote.slice(1).join("");
                    //重整格式将文本发送至多行文本框
                    document.getElementById("logtextarea").value += emj + starttime + note + "\n";

                    localStorage.setItem('content', document.getElementById("logtextarea").value);

                    //清空用户输入的各个内容
                    document.getElementById("logipt").value = "";
                    document.getElementById("starttime").value = "";
                    document.getElementById("finishtime").value = "";
                    // 将单选框name的checked属性设置为false
                    var radios = document.getElementsByName('action');
                    for (var i = 0; i < radios.length; i++) {
                        radios[i].checked = false;
                    }
                }

            } else {
                alert("请至少填写一个开始时间！")
            }

        }

        //在logtextarea编辑结束时操作更新本地存储
        document.getElementById("logtextarea").oninput = function () {
            localStorage.setItem('content', document.getElementById("logtextarea").value);
        }





    </script>



</body>

</html>